<template>
  <div class="menu-list-container">
    <van-cell-group inset>
      <van-cell
          v-for="(item, index) in items"
          :key="index"
          :title="item.title"
          :label="item.label"
          :icon="item.icon"
          :is-link="item.isLink !== false"
          :to="item.to"
          @click="item.action"
          class="menu-item"
      >
        <template #icon>
          <van-icon :name="item.icon" class="menu-icon"/>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup lang="ts">
import type {PropType} from 'vue'

interface IMenuItem {
  title: string
  label?: string
  icon: string
  isLink?: boolean
  to?: string
  action?: () => void
}

const props = defineProps({
  items: {
    type: Array as PropType<IMenuItem[]>,
    required: true
  }
})
</script>

<style scoped lang="less">
.menu-list-container {
  margin-top: 12px;

  :deep(.van-cell-group) {
    border-radius: 12px;
    overflow: hidden;
  }

  .menu-item {
    padding: 16px;

    :deep(.van-cell__title) {
      font-size: 16px;
    }

    :deep(.van-cell__label) {
      font-size: 13px;
      color: #999;
      margin-top: 4px;
    }

    .menu-icon {
      font-size: 20px;
      margin-right: 12px;
      color: var(--van-blue);
    }

    &:not(:last-child)::after {
      left: 16px;
      right: 16px;
    }
  }
}
</style>
